<template>
  <div class="con_box">
    <div class="com_title">任务信息</div>
    <!-- 列表 -->
    <div
      class="orderList"
      v-if="recordList&&recordList.length!=0"
    >
      <div
        class=" flex"
        v-for="(item, index) in recordList"
        :key="index"
      >
        <div class="orderItem">
          <div
            class="orderItem_content"
            @click="goDetail(item)"
          >
            <div class="orderItem_data ">
              <div class="order_label">车牌号</div>
              <div class="txt">{{ item.dateIn }}</div>
            </div>
            <div class="orderItem_data ">
              <div class="order_label">任务状态</div>
              <div class="txt">{{ item.customerName}}</div>
            </div>
            <div class="orderItem_data">
              <div class="order_label">任务生成时间</div>
              <div class="txt">{{ item.serverName }}</div>
            </div>
            <div class="orderItem_data">
              <div class="order_label">最近跟进时间</div>
              <div class="txt">{{ item.carModel }}</div>
            </div>

             <div class="orderItem_data ">
              <div class="order_label">最近跟进方式</div>
              <div class="txt">{{ item.dateIn }}</div>
            </div>
             <div class="orderItem_data ">
              <div class="order_label">任务跟进人员</div>
              <div class="txt">{{ item.dateIn }}</div>
            </div>
             <div class="orderItem_data ">
              <div class="order_label">车架号</div>
              <div class="txt">{{ item.dateIn }}</div>
            </div>
               <div class="orderItem_data ">
              <div class="order_label">任务类型</div>
              <div class="txt">{{ item.dateIn }}</div>
            </div>
               <div class="orderItem_data ">
              <div class="order_label">任务描述</div>
              <div class="txt">{{ item.dateIn }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <van-empty
      class="noContent"
      description="暂无数据"
      v-else
    />

  </div>
</template>

<script>
import Vue from "vue";
import url from "../../../assets/js/api.js";
import axios from "axios";
import { Search, DropdownMenu, DropdownItem, Empty, Dialog } from "vant";
export default {
  name: "carBasicInfo",
  components: {
    Search,
    DropdownMenu,
    DropdownItem,
    Empty,
    Dialog,
  },
  data() {
    return {
      value: "",
      carCouponList: [
        { name: "是", code: 1, check: false },
        { name: "否", code: 0, check: false },
      ],
      firstStatusList: [
        { name: "已处理", code: 1, check: false },
        { name: "未处理", code: 2, check: false },
      ],
      secondStatusList: [
        { name: "持续跟进", code: 1, check: false },
        { name: "本次战败", code: 2, check: false },
        { name: "邀约成功", code: 3, check: false },
      ],
      taskTypeList: [
        { name: "划痕险临期", code: 1, check: false },
        { name: "续保到期", code: 2, check: false },
        { name: "卡券临期", code: 3, check: false },
        { name: "自定义任务", code: 4, check: false },
      ],
      statusList: [
        { name: "已处理", code: 1, check: false },
        { name: "未处理", code: 2, check: false },
      ],

      recordList: [
        {
          billId: "1", //单据ID
          carNo: "闽D66666", //车牌号
          taskName: "闽D66666定期保养招揽", //任务名称
          taskPerson: "张三", //跟进人
          oneBillStatus: "未处理", //任务一级状态
          twoBillStatus: "未处理", //任务二级状态
          customerName: "李四", //客户名称
          mobile1: "", //手机1
          mobile12: "", //手机2
          serverName: "王武", //所属服务顾问
          carModel: "CT5 2,0T", //车型
          carMiles: "8888", //公里数
          dateIn: "2023-06-25", //最近进场日期
        },
      ],
      columns: [],
      showSelectPicker: false,
      requestParams: {
        bgDate: "", // 查询时间
        endDate: "",
        repairCenterType: "",
        userName: "",

        codeNo: "", //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        oneBillstatus: "", //任务一级状态
        twoBillStatus: "", //任务二级状态
        taskType: "", //任务类型ID值
        taskPersonId: "", //任务跟进人，ID值
        billId: "", //本身单据ID，此为详细界面使用
        carId: "", //车辆ID，此为详细界面使用
        userId: "", //用户ID，必填，String
        starDate: "",
        endDate: "",
      },
      carCouponIndex: null,

      repairCenterList: [
        { name: "厦门路虎", code: 1 },
        { name: "厦门捷豹", code: 2 },
      ],
      serviceList: [
        { name: "黄某某", code: 1 },
        { name: "张某某", code: 2 },
      ],
      delayList: [
        { name: "是", code: 1, check: false },
        { name: "否", code: 0, check: false },
      ],
      creatList: [
        { name: "是", code: 1, check: false },
        { name: "否", code: 0, check: false },
      ],

      defeatList: [
        { name: "是", code: 1, check: false },
        { name: "否", code: 0, check: false },
      ],

      delayIndex: null,
      creatIndex: null,
      defeatIndex: null,
      showTransmitFlag: false,
      timeField: "",
      showPickerDate: false,
      currentDate: "",
    };
  },

  mounted() {},

  methods: {
    // 选择下拉
    handleSelect(field) {
      this.showSelectPicker = true;
      if (field == "carCoupon") {
        this.columns = [
          { name: "是", value: 1 },
          { name: "否", value: 2 },
        ];
      } else if (field == "outUser") {
        this.columns = [
          { name: "服务人员1", value: 1 },
          { name: "服务人员2", value: 2 },
        ];
      } else if (field == "repairCenterType") {
        this.columns = [
          { name: "厦门保时捷售后", value: 1 },
          { name: "南宁保时捷售后", value: 2 },
          { name: "昆明保时捷售后", value: 3 },
        ];
      }
      this.field = field;
    },

    // 筛选是否
    handleCarSelect(index) {
      this.carCouponIndex = index;
    },
    // 筛选重置
    handleSelectReset() {
      this.carCouponIndex = null;
      this.requestParams.userName = "";
    },

    // 选择下拉确认
    handleSelectConfirm(value, index) {
      this.requestParams[this.field] = value.name;
      this.showSelectPicker = false;
    },

    // 所属服务顾问重置
    handleReset() {
      this.requestParams.repairCenterType = "";
      this.requestParams.outUser = "";
    },

    //时间重置
    handleAccidentReset() {
      this.requestParams.starDate = "";
      this.requestParams.endDate = "";
    },
    onConfirm(ref) {
      this.$refs[ref].toggle();
    },
    // 时间确认
    onConfirmDate() {
      this.requestParams[
        this.timeField
      ] = `${this.value1}-${this.value2}-${this.value3}`; // 字符串拼接 结果入2020-07-03
      this.onCancelDate();
    },
    onCancelDate() {
      this.showPickerDate = false;
    },

    // 日期组件自定义格式
    formatter(type, value) {
      if (type === "year") {
        this.value1 = value; // 可以拿到当前点击的数值
        return `${value}年`;
      } else if (type === "month") {
        this.value2 = value;
        return `${value}月`;
      }
      this.value3 = value;
      return `${value}日`;
    },

    // 获取list名称
    getFieldName(list, key, val) {
      if (list && list.length > 0) {
        let obj = list.filter((item) => {
          return item[key] == val;
        });
        if (obj.length > 0) {
          return obj[0].name;
        }
      }
      return null;
    },

    // 详情
    goDetail(data) {
      this.$router.push({
        path: "/taskCenterDetail",
        query: { id: data.id },
      });
    },
    // 顶部筛选选择数据
    handleSearchSelect(index, listKey) {
      this[listKey][index].check = !this[listKey][index].check;
    },
    // 重置
    handleSearchReset() {
      this.firstStatusList.forEach((item) => {
        item.check = false;
      });
      this.secondStatusList.forEach((item) => {
        item.check = false;
      });
      this.taskTypeList.forEach((item) => {
        item.check = false;
      });
    },

    handleIsSelect(index, key) {
      this[key] = index;
    },
    // 任务转交展示
    handleShowTransmit() {
      this.showTransmitFlag = true;
    },
    // 确认转交
    handleTransmitSubmit() {},
    // 取消
    handleTransmitCancel() {
      this.showTransmitFlag = false;
    },
    // 时间筛选
    handleSelectTime(field) {
      this.timeField = field;
      this.showPickerDate = true;
    },

  },
};
</script>

<style lang="less" scoped="">
.con_box{
  width: 15.2rem;
  height: 3rem;
  background: #fff;
  margin-right: .2rem;
  box-sizing: content-box;
  margin-bottom: .2rem;
}
.com_title {
  position: relative;
  background: #dcdcdc;
  font-size: 0.32rem;
  padding: 0.2rem;
  &::before {
    content: "";
    background: #409eff;
    width: 4px;
    position: absolute;
    height: 20px;
    top: 7px;
    left: 0;
  }
}
.orderList {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  .taskCheck {
    margin-right: 0.1rem;
  }
  .orderItem {
    padding: 0.3rem;
    border-radius: 10px;
    margin-bottom: 0.3rem;
    .orderItem_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.3rem;
      padding-bottom: 0.2rem;
      border-bottom: 1px solid #f6f6f6;
      position: relative;
      .orderItem_lt {
        .carNo {
          font-size: 0.3rem;
          color: #333;
          margin-right: 0.2rem;
          font-weight: bold;
        }

        .carStatus {
          background: #35bc04;
          color: #fff;
          border-radius: 4px;
          padding: 0.1rem 0.2rem;
          font-size: 0.24rem;
          text-align: center;
          width: 1rem;
          margin-top: 0.1rem;
        }
      }
      .orderItem_rt {
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: flex-start;
        color: #666;
        font-size: 0.28rem;

        .txt {
          font-size: 0.28rem;
          color: #161616;
        }
        .icon-tel {
          color: #fff;
          background: #35bc04;
          font-size: 0.32rem;
          padding: 0.1rem;
          border-radius: 50%;
          margin-right: 0.2rem;
        }
        .icon-wx {
          color: #409eff;
          font-size: 0.65rem;
        }
      }
    }
    .orderItem_content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      .orderItem_data {
        width: 15%;
        margin-bottom: 0.2rem;
        font-size: 0.28rem;
        box-sizing: content-box;
        color: #333;
        margin-bottom: .2rem;
        .order_label {
          font-size: 0.28rem;
          color: #999;
          width: 1.8rem;
          margin-bottom: .2rem;
        }
        .txt {
          font-size: 0.28rem;
          color: #333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &.time {
          width: 100%;
        }
      }
    }
    .orderItem_file {
      background: #ebebeb;
      color: #333;
      border-radius: 5px;
      padding: 0.2rem 0;
      text-align: center;
      width: 100%;
      font-size: 0.28rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .file_item {
        width: 33.33%;
        border-right: 1px solid #ccc;
        .icon-tel {
          font-size: 0.34rem;
          color: #35bc04;
          margin-right: 0.1rem;
        }
        .icon-mileage {
          font-size: 0.4rem;
          color: #409eff;
          margin-right: 0.1rem;
          position: relative;
          top: 0.04rem;
        }
        .icon-gw {
          font-size: 0.4rem;
          color: #409eff;
          margin-right: 0.1rem;
          position: relative;
          top: 0.04rem;
        }
        &:last-child {
          border: none;
        }
      }
    }
  }
}

.noContent {
  margin-top: 2rem;
}
/deep/.van-dropdown-item {
  width: 7.5rem;
}
</style>
